<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #invisibleDiv {
        width: 300px;
        height: 300px;
        background-color: deeppink;
        /*display: none;*/
        /*渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。*/

        /*visibility: hidden;*/
        /*元素在页面中仍占据空间，但是不会响应绑定的监听事件。*/

        /*opacity: 0;*/
        /*将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。*/

        /*position: absolute;*/
        /*left: -300px;*/
        /*top: -300px;*/
        /*通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。不再占据位置。可以响应事件，但是毕竟看不到了。*/

        /*z-index: -999;*/
        /*无效！*/

        /*clip-path: inset(200px 200px);*/
        /*对元素进行裁剪。占据位置、不响应事件*/

        transform: scale(0);
        /*将元素2D缩放设置为 0，来实现元素的隐藏。占据位置、不响应事件*/
    }
</style>
<body>
<div style="" id="invisibleDiv"></div>
<h3>div后元素</h3>
</body>
<script>
    let element = document.getElementById('invisibleDiv');
    element.addEventListener('click',function () {
        console.log('哈哈我被开了！！！')
    })
</script>
</html>